<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>支付成功</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style type="text/css">
			body {
				color: #333;
				font-size: 1.4rem;
			}
			/*.mui-bar-nav.mui-bar .mui-icon {
				padding-left: 0;
			}*/
			
			.hotel-header,
			.mui-title,
			.hotel-header .mui-icon {
				color: #e61874;
				background: #fff;
			}
			
			.hotel-header .home {
				position: absolute;
				right: 1.2rem;
				height: 4.4rem;
				line-height: 4.4rem;
			}
			
			.hotel-header .share {
				position: absolute;
				right: 6.5rem;
				height: 4.4rem;
				line-height: 4.4rem;
			}
			
			.home img,
			.share img {
				vertical-align: text-top;
			}
			
			.content-top {
				background: #fff;
				padding: 3rem 4.2rem 1.5rem 4.2rem;
			}
			
			.success {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-bottom: 3.6rem;
			}
			
			.success span {
				font-size: 2rem;
				font-weight: bold;
				padding-top: 1.2rem;
			}
			
			.success img {
				width: 6.9rem;
			}
			
			.font14 {
				font-size: 1.4rem;
				color: #666;
			}
			
			.bold {
				font-weight: bold;
			}
			
			.color {
				color: #e61874;
			}
			
			.info-name,
			.info-type,
			.info-price {
				padding-bottom: 1.5rem;
			}
			
			.info-name,
			.info-type,
			.info-price,
			.info-num {
				display: flex;
				justify-content: space-between;
			}
			
			.content-bottom {
				margin: 1.2rem 0;
				background: #fff;
			}
			
			.hotel-other {
				display: flex;
				justify-content: space-around;
				font-size: 0;
				padding: 2.1rem 0;
			}
			
			.hotel-other .tel,
			.hotel-other .map {
				display: flex;
				align-items: flex-end;
			}
			
			.hotel-other a span {
				font-size: 1.6rem;
				color: #333;
				padding-left: 0.9rem;
			}
			
			.tip {
				font-size: 1.2rem;
				line-height: 2rem;
				color: #666;
				padding: 0 1.2rem;
			}
			
			.tip li:before {
				content: "";
				display: inline-block;
				width: 0.2rem;
				height: 0.2rem;
				background-color: #666;
				border-radius: 50%;
				margin-right: 0.6rem;
				margin-bottom: 0.4rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">支付成功</h1>
			<a class="share" data-url="./index.html">
				<img width="20" src="../styles/images/order/icon_share.png@2x.png" />
			</a>
			<a class="home" data-url="./index.html">
				<img width="20" src="../styles/images/order/icon_home.png@2x.png" />
			</a>
		</header>
		<div class="mui-content">
			<ul class="content-top">
				<li class="success">
					<img width="" src="../styles/images/order/icon_success.png@2x.png" />
					<span>支付成功！</span>
				</li>
				<li id="detail-info" class="detail-info">
					<div class="info-name">
						<span class="font14">酒店名称：</span>
						<span class="bold">深圳雅赏会馆</span>
					</div>
					<div class="info-type">
						<span class="font14">房型：</span>
						<span class="bold">高级大床房</span>
					</div>
					<div class="info-price">
						<!--<span class="font14">消费金额&nbsp;&nbsp;<span class="color bold">￥268</span></span>-->
						<span class="font14">消费金额</span>
						<span class="font14"><span class="color bold">￥268</span></span>
					</div>
					<div class="info-num">
						<span class="font14">订单编号：</span>
						<span>123456789</span>
					</div>
				</li>
			</ul>
			<ul class="content-bottom">
				<li class="hotel-other">
					<a id="hotel-order" class="tel">
						<img width="15" class="icon" src="../styles/images/order/icon_order.png@2x.png" />
						<span class="font16">查看订单</span>
					</a>
					<a id="hotel-map" class="map">
						<img width="20" class="icon" src="../styles/images/order/icon_map.png@2x.png" />
						<span class="font16">酒店地图</span>
					</a>
				</li>
			</ul>
			<ul class="tip">
				<li>您已获得30元冻结中返现，成功申请返现且结账3个工作日后返现可使用。</li>
				<li>通常酒店14：00办理入住，早到可能需要等待。</li>
			</ul>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init({
				preloadPages: [{
					id: 'order-detail2.html',
					url: 'order-detail2.html'
				}],
				swipeBack: true //启用右滑关闭功能
			});

			var detailInfo = document.getElementById("detail-info");
			var orderid;
			window.addEventListener('psID', function(event) {
				//获得事件参数
				orderid = event.detail.orderid;
				var html = '';
				mui.ajax('http://www.aiai.com/api/order', {
					data: {
						orderid: orderid
					},
					dataType: 'json',
					type: 'get',
					success: function(data) {
//						console.log(JSON.stringify(data));
						html += '<div class="info-name">';
						html += '<span class="font14">酒店名称：</span>';
						html += '<span class="bold" id="' + data.hotelid + '">' + data.hotelchnname + '</span></div>';
						html += '<div class="info-type">';
						html += '<span class="font14">房型：</span>';
						html += '<span class="bold"></span>' + data.roomtypename + '</div>';
						html += '<div class="info-price">';
						html += '<span class="font14">消费金额</span>';
						html += '<span class="font14"><span class="color bold">￥' + data.totalamount + '</span></span></div>';
						html += '<div class="info-num">';
						html += '<span class="font14">订单编号：</span>';
						html += '<span>' + data.orderid + '</span></div>';

						detailInfo.innerHTML = html;
					}
				});
			});
			
//			var orderid = "201705122671095852";
			// var hotelOrder = document.getElementById("hotel-order"); // 查看订单
			
			// 向酒店详情页传值
			var orderDetailPage = null;
			var orderData; // 订单详情的数据
			
			// 添加查看订单的点击事件
			mui('.content-bottom').on('tap', '#hotel-order', function(event) {
				mui.ajax('http://www.aiai.com/api/order', {
					data: {
						orderid: orderid // 订单id
					},
					dataType: 'json',
					type: 'get',
					success: function(data) {
						orderData = data;
						console.log("支付成功页orderData:" + JSON.stringify(orderData));
						
						// 获得酒店详情页
						if(!orderDetailPage) {
							orderDetailPage = plus.webview.getWebviewById('order-detail2.html');
						}
						// 触发详情页的hdID事件
						mui.fire(orderDetailPage, 'odID', {
							orderData: orderData // 请求接口返回的数据
						});
						// 打开酒店详情页面
						mui.openWindow({
							id: 'order-detail2.html',
							show: {
								autoShow: true
							}
						});
					}
				});
			});
		</script>
	</body>

</html>